<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网络跟踪</title>
		<!--引入layui的css  -->
		<link rel="stylesheet" href="../layui/css/layui.css" />
	</head>
	<!--引入layui的js  -->
	<script type="text/javascript" src="../layui/layui.js"></script>
	<!--引入jquery的js  -->
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/global.js"></script>

	<body>
		<!-- 查询条件输入框 -->
		<div class="layui-form-item" style="margin-top: 10px;">
			<form class="layui-form" onsubmit="return false;">
				<label class="layui-form-mid">学生名:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" id="name" name="name" autocomplete="off" class="layui-input">
				</div>
				
				<label class="layui-form-mid">跟踪时间:</label>
				<div class="layui-input-inline" style="width: 170px;">
					<input type="text" id="followtime" name="followtime" placeholder="yyyy-MM-dd HH-mm-ss"
						autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width: 170px;">
					<input type="text" id="endDate" name="endDate" placeholder="yyyy-MM-dd HH-mm-ss" autocomplete="off"
						class="layui-input">
				</div>
				
				<label class="layui-form-mid">跟踪状态:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<select id="followstate" name="followstate">
						<option value="">所有</option>
						<option value="1">已付款</option>
						<option value="2">正在跟踪</option>
						<option value="3">失败</option>
					</select>
				</div>

				<div class="layui-input-inline" style="width: 300px;">
					<button class="layui-btn" lay-submit lay-filter="search" id="search" data-type="reload"><i
							class="layui-icon">&#xe615;</i>搜索</button>
					<!--<button class="layui-btn layui-btn-normal" lay-submit lay-filter="add" id="add"
						data-type="reload">添加</button>-->
					<a class="layui-btn layui-btn-small" style="line-height:1.6em;"
						href="javascript:location.replace(location.href);" title="刷新">
						<i class="layui-icon" style="line-height:38px">&#xe666;</i>
					</a>
				</div>
			</form>
		</div>

		<!-- 修改的弹层页面  -->
		<div id="editLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="editForm" id="editForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>学生名:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="stduentname" name="stduentname" class="layui-input" lay-verify="required">
						<input type="hidden" name="id" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>跟踪时间:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="followtime1" name="followtime" class="layui-input" lay-verify="required" placeholder="yyyy-MM-dd">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>下次跟踪时间:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="nextfollowtime" name="nextfollowtime" class="layui-input" placeholder="yyyy-MM-dd"
							>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>内容:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="content" name="content" class="layui-input"
							>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>跟踪者用户ID:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="userid" name="userid" class="layui-input"
							lay-verify="required" disabled="disabled">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>跟踪类型:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<select id="followtype" name="followtype">
						<option value="">所有</option>
						<option value="1">电话跟踪</option>
						<option value="2">QQ跟踪</option>
						<option value="3">微信跟踪</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>创建时间:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="createtime" name="createtime" class="layui-input" placeholder="yyyy-MM-dd"
							>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>跟踪状态:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<select id="followstate" name="followstate">
						<option value="">所有</option>
						<option value="1">已付款</option>
						<option value="2">正在跟踪</option>
						<option value="3">失败</option>
						</select>
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="editSubmit" lay-submit="">修改</button>
				</div>
			</form>
		</div>


		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>

		<!--表格数据里的编辑、查看等操作按钮  -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-btn-small" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
		</script>



		<script>
			layui.use(['laydate', 'layer', 'form', 'table', 'tree', 'upload', 'transfer'], function() {
				var laydate = layui.laydate //日期组件
					,
					layer = layui.layer //弹层组件
					,
					form = layui.form //表单组件
					,
					upload = layui.upload //上传组件
					,
					tree = layui.tree //树形结构组件
					,
					$ = layui.$ //jQuery
					,
					table = layui.table,
					transfer = layui.transfer; //表格组件

				//日期控件
				laydate.render({
					elem: '#createtime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#endDate',
					type: 'datetime'
				});
				
				//日期控件
				laydate.render({
					elem: '#followtime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#followtime1',
					type: 'datetime'
				});
				laydate.render({
					elem: '#nextfollowtime',
					type: 'datetime'
				});

				//渲染表格，填充数据
				table.render({
					elem: '#proTable', //对应上面定义的表格ID
					url: "" + globalData.server + "netfollows/selectNetfollowsIdAll", //提交到后台的地址
					method: 'post', //提交方式 get或者post
					where: {
						"userid": globalData.getCurUid(),
						"token": globalData.token
					},
					even: true, //表格隔行变色
					page: true, //开启分页
					toolbar: false, 	//开启头部工具栏，并为其绑定左侧模板
					title: '产品表', //表格名称
					cols: [
						[{
//							field: 'id', //对应实体类里的属性    （必需有）
//							fixed: 'left', //固定方式，left左固定，right右固定 （可选）
//							align: 'center', //排列方式：left左对齐，center居中，right右对齐（可选）
//							title: '学生id', //表头名称			（必需有）
//							sort: true,
//							width: 100 //开启排序（可选）
//						}, {
							field: 'studentid',
							title: '学生id',
							width: 100
						}, {
							field: 'stduentname',
							title: '学生名',
							width: 100
						}, {
							field: 'followtime',
							title: '跟踪时间'
						}, {
							field: 'nextfollowtime', //对应实体类里的属性
							title: '下次跟踪时间' //表头名称
						}, {
							field: 'content',
							title: '内容',
							width: 150
						}, {
							field: 'userid',
							title: '跟踪者用户ID',
							width: 150
						}, {
							field: 'followtype',
							title: '跟踪类型',
							width: 150,
							templet: function (d) {
				                if (d.followtype =='1'){
				                    return '电话跟踪'
				                }else if(d.followtype =='2') {
				                    return 'QQ跟踪'
				                }else {
				                    return '微信跟踪'
				                }
				            }
						}, {
							field: 'createtime',
							title: '创建时间',
							width: 150
						}, {
							field: 'followstate',
							title: '跟踪状态',
							width: 100,
							templet: function (d) {
				                if (d.followstate =='1'){
				                    return '<div style="color:#5FB878;">已付款</div>'
				                }else if(d.followstate =='2') {
				                    return '<div style="color:#FFB800;">正在跟踪</div>'
				                }else {
				                    return '<div style="color:#FF0000;">失败</div>'
				                }
				            }
						}, {
							fixed: 'right',
							title: '操作',
							width: 300,
							toolbar: '#barDemo'
						}]
					]
				});


				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
				form.on('submit(search)', function(data) {
					var field = data.field; //获取所有的输入条件值
					//执行重载
					table.reload('proTable', {
						page: {
							curr: 1
						}, // 重载后回到第一页
						where: field // 把所有的输入值传给后台
					});
				});

				//数据表格里的事件监听
				table.on('tool(filterTable)', function(obj) {
					var data = obj.data; //获取当前行的数据

					switch (obj.event) {
						
						case 'edit': //修改操作
							//数据的回显
							form.val("editForm", data);
							//							$("#studentName").val(data.studentName);
							//							$("#email").val(data.ProtectEMail);
							//							$("#mtel").val(data.ProtectMTel);
							//打开弹层
							layer.open({
								type: 1,
								title: '您正在修改编号【' + data.id + '】的信息',
								content: $('#editLayer'),
								area: ['800px', '600px']
							});
							break;
						case 'del': //删除操作
							if (confirm("确定删除吗？")) {
								$.ajax({
									type: 'post', //提交方式get或post
									url: "" + globalData.server + "netfollows/deleteNetfollows", //提交路径
									data: {
										"id": data.id,
										"token": globalData.token
									}, //参数
									dataType: 'json', //返回的数据类型
									success: function(res) { //提交成功
										layer.alert("删除成功！！！"); //提示信息
										table.reload('proTable'); // 修改后要刷新表格
									},
									error: function() { //提交失败
										alert("系统异常！！")
									}
								});
							}
							break;
						
					};
				})

				//修改弹层的提交按钮
				form.on('submit(editSubmit)', function(data) {
					$.ajax({
						type: 'post', //提交方式get或post
						url: "" + globalData.server + "netfollows/updateNetfollows", //提交路径
						data: $("#editForm").serialize() + "&token=" + globalData.token, //参数
						dataType: 'json', //返回的数据类型
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert("修改成功！！！"); //提示信息
							table.reload('proTable'); //刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});
					return false;
				});

			});
		</script>
	</body>
</html>
